import { library } from '@/services';
import { Button, Input, Layout, List, Modal, Tabs } from 'antd';
import React, {
  memo, useEffect,
  useState
} from 'react';
import { connect } from 'react-redux';
import styles from './index.less';
const { Sider } = Layout;
const { TabPane } = Tabs;

const pages = ['首页', '关于'];
export default memo(
  connect(({ project }: any) => ({ project }), {
    getPages: (payload: any) => ({ type: 'project/getPages', payload }),
    getPageConfigs: (payload: any) => ({
      type: 'project/getPageConfigs',
      payload,
    }),
    getPageCode: (payload: any) => ({ type: 'project/getPageCode', payload }),
    save: (payload: any) => ({ type: 'project/save', payload }),
  })(function ({
    getPages,
    getPageConfigs,
    getPageCode,
    save,
    project,
  }: API.IAsideProps) {
    const [currentTab, setCurrentTab] = useState('0');
    const [expand, setExpand] = useState(true);
    const [currentPage, setCurrentPage] = useState(0);
    const [libs, setLibs] = useState([]);
    const [isLoading, setIsLoading] = useState(false);

    const onTabChange = function (key: string) {
      if (key === currentTab) {
        setExpand(!expand);
      } else {
        setCurrentTab(key);
      }
    };

    const showImportLib = () => {};

    const changeCurrentPage = (index: number) => {
      const { pages } = project;
      setCurrentPage(index);
      save({
        currentPage: pages[index],
      });

      getPageConfigs({ project: 'project', page: pages[index] });
      getPageCode({ project: 'project', page: pages[index] });
    };

    const handleSearch = async (value: string) => {
      setIsLoading(true);
      try {
        const libs = await library.searchLibs(value);
        setLibs(libs);
      } catch (error) {}
      setIsLoading(false);
    };

    useEffect(
      function () {
        getPages({ project: 'project' });
      },
      [pages],
    );
    
    return (
      <>
        <Sider
          className={`${styles.siteBackground} ${
            styles[expand ? 'expand' : 'close']
          }`}
        >
          <Tabs tabPosition="left" onChange={onTabChange}>
            <TabPane tab="页面" key="1">
              <List>
                {project.pages.map((item: any, index: number) => (
                  <List.Item
                    key={item}
                    className={`${styles.pageItem} ${
                      currentPage === index ? styles.selected : ''
                    }`}
                    onClick={() => changeCurrentPage(index)}
                  >
                    {item.split('.')[1]}
                  </List.Item>
                ))}
              </List>
            </TabPane>
            <TabPane tab="资产" key="2">
              <List>
                <List.Item className={styles.pageItem} onClick={showImportLib}>
                  导入组件库
                </List.Item>
              </List>
            </TabPane>
            <TabPane tab="数据" key="3">
              3
            </TabPane>
          </Tabs>
        </Sider>
        <Modal visible={false} title="导入自定义组件" confirmLoading={isLoading}>
          <Input.Search
            placeholder="@antd/xxx"
            enterButton="搜索"
            onSearch={handleSearch}
          />
          <List className={styles.libsList}>
            {libs.map((item: any) => (
              <List.Item>
                <div className={styles.libItem}>
                  <h3>{item.name}</h3>
                  <p>{item.description}</p>
                </div>
                <Button size="small" type="primary">
                  安装
                </Button>
              </List.Item>
            ))}
          </List>
        </Modal>
      </>
    );
  }),
);
